<!--

    Copyright (c) 2015-2017 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-toolbar che-title="New Workspace">
  <che-button-primary class="create-project-header-button"
                      che-button-title="Create"
                      ng-click="!createProjectCtrl.checkValidFormState() || createProjectCtrl.create()"
                      ng-disabled="!createProjectCtrl.checkValidFormState() || !createProjectCtrl.isReadyToCreate()"
                      ng-show="!createProjectCtrl.isCreateProjectInProgress() || createProjectCtrl.getCurrentProgressStep() === (createProjectCtrl.getCreationSteps().length - 1)">
  </che-button-primary>
</che-toolbar>

<md-progress-linear md-mode="indeterminate" class="projects-list-projects-progress"
                    ng-hide="createProjectCtrl.stacksInitialized || createProjectCtrl.workspaces.length"></md-progress-linear>
<md-content id="create-project-content-page"
            md-scroll-y flex
            class="projects-create-project">
  <div ng-if="createProjectCtrl.isCreateProjectInProgress()">
    <div id="create-project-panel" class="create-project-progress-panel">
      <che-loader class="che-loader-panel" layout="column">
        <!--crane and terminals-->
        <div class="che-loader-animation-panel main-page" layout="row" flex>
          <div layout="column"
               hide-xs hide-sm
               layout-align="end start">
            <che-loader-crane che-all-steps="createProjectCtrl.getCreationSteps()"
                              che-exclude-steps="[createProjectCtrl.getCreationSteps().length-1]"
                              che-step="{{createProjectCtrl.getCurrentProgressStep()}}"
                              che-switch-on-iteration="true">
            </che-loader-crane>
          </div>
          <div layout="column"
               layout-align="center center"
               flex="auto">
            <che-steps-container class="create-project-working-log"
                                 che-all-steps="createProjectCtrl.getCreationSteps()"
                                 che-current-step="createProjectCtrl.getCurrentProgressStep()"></che-steps-container>
          </div>
        </div>
        <!--bottom bar-->
        <div class="che-loader-bottom-bar" flex="none">
          <div class="main-page" layout="row" layout-align="center stretch">
            <div flex="50" layout="column" layout-align="end start">
            </div>
          </div>
        </div>
      </che-loader>
    </div>
  </div>

  <div ng-if="!createProjectCtrl.isCreateProjectInProgress()">

    <!-- Select source -->
    <che-label-container id="create-project-source-id"
                         che-label-name="Select Source"
                         che-label-description="Choose where the initial source code for this project will come from. The choice of templates and samples will vary by the stack chosen.">
      <md-radio-group ng-model="createProjectCtrl.selectSourceOption"
                      ng-change="createProjectCtrl.onSourceOptionChanged()">
        <md-radio-button value="select-source-new">New from blank, template, or sample project</md-radio-button>
        <md-radio-button value="select-source-existing">Import from existing location</md-radio-button>
      </md-radio-group>

      <div ng-show="createProjectCtrl.selectSourceOption === 'select-source-existing'">
        <md-tabs md-stretch-tabs="auto"
                 md-dynamic-height
                 md-no-ink-bar
                 md-selected="createProjectCtrl.selectedTabIndex">
          <md-tab md-on-select="createProjectCtrl.setCurrentTab('git')">
            <md-tab-label>
              <span class="che-tab-label-title">Git Repository</span>
            </md-tab-label>
            <md-tab-body>
              <create-project-git class="projects-create-project-tab" layout="column"></create-project-git>
            </md-tab-body>
          </md-tab>
          <md-tab md-on-select="createProjectCtrl.setCurrentTab('github')">
            <md-tab-label>
              <span class="che-tab-label-title">GitHub</span>
            </md-tab-label>
            <md-tab-body>
              <form name="createProjectGitHubForm">
                <create-project-github ng-init="createProjectCtrl.setForm(createProjectGitHubForm, 'github')"
                                       class="projects-create-project-tab"
                                       che-form="createProjectGitHubForm"
                                       che-repository-model="createProjectCtrl.selectedGitHubRepository"
                                       che-repository-select="createProjectCtrl.selectGitHubRepository(createProjectCtrl.selectedGitHubRepository)"
                                       che-is-current-tab="createProjectCtrl.getCurrentTab() === 'github'"
                                       layout="column"></create-project-github>
              </form>

            </md-tab-body>
          </md-tab>
          <md-tab md-on-select="createProjectCtrl.setCurrentTab('zip')">
            <md-tab-label>
              <span class="che-tab-label-title">Zip</span>
            </md-tab-label>
            <md-tab-body>
              <create-project-zip class="projects-create-project-tab" layout="column"></create-project-zip>
            </md-tab-body>
          </md-tab>
        </md-tabs>
      </div>
    </che-label-container>

    <!-- Select stack -->
    <che-label-container che-label-name="{{createProjectCtrl.workspaces.length ? 'Select Workspace' : 'Select Stack'}}"
                         che-label-description="{{createProjectCtrl.workspaces.length ? 'Select existing workspace or create it from stack' : 'Select stack'}}, recipe or image used to define your environment runtime. Workspace environments are used to build and run your project.">
      <ng-form name="workspaceResourceForm">
        <md-radio-group ng-model="createProjectCtrl.workspaceResource"
                        ng-init="createProjectCtrl.setWorkspaceResourceForm(workspaceResourceForm)"
                        ng-change="createProjectCtrl.workspaceResourceOnChange()">

          <!-- radio-button: existing workspace-->
          <md-radio-button value="existing-workspace" ng-disabled="createProjectCtrl.workspaces.length === 0">Select existing workspace</md-radio-button>
          <div ng-if="createProjectCtrl.workspaceResource === 'existing-workspace'">
            <create-project-workspaces che-workspace="createProjectCtrl.workspaceSelected"
                                       che-workspace-change="createProjectCtrl.onWorkspaceChange()"></create-project-workspaces>
          </div>

          <!-- radio-button: from config -->
          <md-radio-button value="from-config">Create from configuration</md-radio-button>
          <div ng-if="createProjectCtrl.workspaceResource === 'from-config'">
            <che-workspace-config-import workspace-config="createProjectCtrl.workspaceConfig"
                                         workspace-config-on-change="createProjectCtrl.updateWorkspaceConfigImport(config)"></che-workspace-config-import>
          </div>

          <!-- radio-button: from stack -->
          <md-radio-button value="from-stack">Create new workspace from stack</md-radio-button>
          <div ng-if="createProjectCtrl.workspaceResource === 'from-stack'">
            <workspace-select-stack workspace-stack-on-change="createProjectCtrl.changeWorkspaceStack(config, stackId)"
                                    workspace-name="createProjectCtrl.workspaceName"
                                    environment-name=""
                                    workspace-imported-recipe=""></workspace-select-stack>
          </div>
        </md-radio-group>
      </ng-form>
    </che-label-container>

    <!-- Workspace -->
    <che-label-container ng-show="createProjectCtrl.stackLibraryOption !== 'existing-workspace'"
                         che-label-name="Configure workspace"
                         che-panel-id="create-project-workspace"
                         che-label-description="A workspace contains projects and runtime environments. If your stack requires a new workspace, configure it here.">
      <ng-form name="workspaceInformationForm">
        <div class="create-project-nested-container"
             ng-init="createProjectCtrl.setWorkspaceInformationForm(workspaceInformationForm)">
          <che-label-container che-label-name="Name">
            <div class="create-project-input">
              <che-input che-form="workspaceInformationForm"
                         che-name="workspaceName"
                         che-place-holder="Name of the workspace"
                         aria-label="Name of the workspace"
                         ng-model="createProjectCtrl.workspaceName"
                         ng-change="createProjectCtrl.workspaceNameChange(workspaceInformationForm)"
                         ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 1000, 'blur': 0 } }"
                         required
                         unique-workspace-name="createProjectCtrl.existingWorkspaceName"
                         ng-minlength="3"
                         ng-maxlength="100"
                         ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
                <div ng-message="required">A name is required.</div>
                <div ng-message="pattern">Workspace name may contain digits, latin letters, _ , . , - and should start
                  only with digits, latin
                  letters or underscores
                </div>
                <div ng-message="minlength">The name has to be more than 3 characters long.</div>
                <div ng-message="maxlength">The name has to be less than 100 characters long.</div>
                <div ng-message="uniqueWorkspaceName">This workspace name is already used.</div>
              </che-input>
            </div>
          </che-label-container>
          <che-label-container che-label-name="RAM">
            <div data-ng-repeat="(environmentKey, environmentValue) in createProjectCtrl.workspaceConfig.environments">
              <span ng-if="createProjectCtrl.getObjectKeys(createProjectCtrl.workspaceConfig.environments).length > 1"
                    class="workspace-environment-name">ENVIRONMENT: {{environmentKey}}</span>

              <div>
                <div data-ng-repeat="machine in createProjectCtrl.getStackMachines(environmentValue) as machines">
                  <div class="workspace-machine" ng-if="machine.attributes && machine.attributes.memoryLimitBytes">
                    <span ng-if="machines.length > 1">MACHINE: {{machine.name}}</span>
                    <che-workspace-ram-allocation-slider
                            ng-model="machine.attributes.memoryLimitBytes"
                            che-on-change="createProjectCtrl.workspaceRamChange(machine.name, machine.attributes.memoryLimitBytes)"></che-workspace-ram-allocation-slider>
                  </div>
                </div>
              </div>
            </div>
          </che-label-container>
        </div>
      </ng-form>
    </che-label-container>

    <!-- Template -->
    <che-label-container id="create-project-source-template"
                         ng-show="createProjectCtrl.selectSourceOption === 'select-source-new'"
                         che-label-name="Template"
                         che-label-description="Select a code template to create a new project in the workspace.">
      <md-radio-group ng-model="createProjectCtrl.templatesChoice">
        <md-radio-button value="templates-samples">Ready-to-run project samples</md-radio-button>
        <create-project-samples current-stack-tags="createProjectCtrl.currentStackTags"
                                project-sample-on-select="createProjectCtrl.projectSampleOnSelect(template)"
                                ng-if="createProjectCtrl.templatesChoice === 'templates-samples'"></create-project-samples>
        <md-radio-button ng-if="createProjectCtrl.enableWizardProject"
                         ng-click="createProjectCtrl.selectWizardProject()"
                         value="templates-wizard">Wizard-driven templates
        </md-radio-button>
      </md-radio-group>
    </che-label-container>

    <!-- Project -->
    <che-label-container che-label-name="Project Metadata"
                         id="create-project-source-information"
                         class="che-label-container-last">
      <ng-form name="projectInformationForm">
        <div class="create-project-nested-container"
             ng-init="createProjectCtrl.setProjectInformationForm(projectInformationForm);">
          <che-label-container che-label-name="Name">
            <div class="create-project-input">
              <che-input che-form="projectInformationForm"
                         che-name="name"
                         che-place-holder="Name of the project"
                         aria-label="Name of the project"
                         ng-model="createProjectCtrl.projectName"
                         required
                         unique-project-name="createProjectCtrl.getWorkspaceProjects()"
                         ng-maxlength="128"
                         ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
                <div ng-message="required">A name is required.</div>
                <div ng-message="uniqueProjectName">This project name is already used.</div>
                <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.</div>
                <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
                <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
              </che-input>
            </div>
          </che-label-container>
          <che-label-container che-label-name="Description"
                               ng-if="createProjectCtrl.importProjectData.project.type && createProjectCtrl.importProjectData.project.type.length > 0">
            <div class="create-project-input">
              <che-input che-form="projectInformationForm"
                         che-name="description"
                         che-place-holder="Description of the project"
                         aria-label="Description of the project"
                         che-width="auto"
                         ng-model="createProjectCtrl.projectDescription"
                         ng-maxlength="256">
                <div ng-message="maxlength">The name has to be less than 256 characters long.</div>
                <div ng-message="md-maxlength">The name has to be less than 256 characters long.</div>
              </che-input>
            </div>
          </che-label-container>
        </div>
      </ng-form>
    </che-label-container>

    <che-button-primary id="create-project-button-import"
                        che-button-title="Create"
                        ng-click="!createProjectCtrl.checkValidFormState() || createProjectCtrl.create()"
                        ng-disabled="!createProjectCtrl.checkValidFormState() || !createProjectCtrl.isReadyToCreate()"
                        class="projects-create-project-button"
            ></che-button-primary>

    <div class="create-project-empty-space"></div>

  </div>

</md-content>
